<style scoped lang="scss">
	.empty {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.icon {
			font-size: 30px;
			color: #777;
			transform-origin: 50%,50%;
			-webkit-animation:xuanzhuan 1.2s linear infinite;
		}
		.image {
			width: 50px;
			height: 50px;
		}
		.title {
			color: #777;
			margin-top: 8px;
		}
		@-webkit-keyframes xuanzhuan {
			0%{-webkit-transform:rotate(0deg);}
			25%{-webkit-transform:rotate(90deg);}
			50%{-webkit-transform:rotate(180deg);}
			75%{-webkit-transform:rotate(270deg);}
			100%{-webkit-transform:rotate(360deg);}
		}
	}
</style>
<template>
    <view class="empty">
    	<text v-bind:class="['icon', icon]"></text>
    	<view class="title">
    		加载中...
    	</view>
    </view>
</template>
<script>
export default {
    name: 'XyLoading',
    props: {
		icon: {
			type: String,
			default: 'xyicon xyicon-loading'
		}
    },
    data() {
        return {
        }
    },
    created: function () {
    },
    methods: {
    }
}
</script>
